<template>
  <hips-view content-frozen>
    <hips-nav-bar
      slot="header"
      title="Scroll 复杂滚动"
      :back-button="{
        showLeftArrow: true,
      }"
      @nav-bar-back-click="$router.back()"
    />
    <hips-scroll
      ref="scroll"
      :scroll-options="scrollOption"
      :data="[list]"
      @pulling-down="loadRefresh"
      @pulling-up="loadMore"
    >
      <ul class="scroll-list">
        <h3 class="space-section">
          留白占位区域
        </h3>
        <h3 class="nest-title">
          嵌套滚动区域
        </h3>
        <li class="nest-scroll-section">
          <hips-scroll
            ref="scroll1"
            :data="[list1]"
            nest-mode="native"
          >
            <ul class="list-wrapper">
              <li
                v-for="(item, index) in list1"
                :key="index"
                class="scroll-item"
              >
                inner {{ item }} - {{ index }}
              </li>
            </ul>
          </hips-scroll>
        </li>
        <li
          v-for="(item, index) in list"
          :key="index"
          class="scroll-item hips-thinline--bottom"
          @click="clickItem(item)"
        >
          {{ item }}
        </li>
        <li
          v-show="list.length > 20"
          class="scroll-item hips-thinline--bottom"
          style="color: #1f8ceb"
          @click="scrollToTop"
        >
          点我回到顶部
        </li>
      </ul>
    </hips-scroll>
  </hips-view>
</template>

<script>
import BasicView from '@/mixin/basic-view';
import { Scroll } from '@hips/vue-ui';

function timeout(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}
export default {
  components: {
    [Scroll.name]: Scroll,
  },
  mixins: [ BasicView ],

  data() {
    return {
      list: [],
      list1: [
1, 2, 3, 4, 5, 6, 7, 8, 9, 1, 2, 3, 4, 5, 6, 7, 8, 9,
],
      page: 1,
      pageSize: 10,
      scrollOption: {
        pullDownRefresh: {
          threshold: 60, // 触发 pullingDown 的距离
          stop: 40, // pullingDown 正在刷新 hold 时的距离
          txt: '刷新成功',
        },
        pullUpLoad: {
          txt: {
            more: '上拉加载更多',
            noMore: '没有更多数据',
          },
        },
      },
    };
  },

  mounted() {
    this.loadRefresh();
  },

  methods: {
    clickItem(item) {
      this.$hips.toast(item);
    },

    scrollToTop() {
      this.$refs.scroll.scrollTo(0, 0);
    },

    // 加载刷新数据
    async loadRefresh() {
      const data = await this._fetchList();
      // 初始化数据
      this.list = data;
      this.page = 1;
      // this.$nextTick(() => {
      //   this.$refs.scroll.forceUpdate()
      // })
    },

    // 加载更多数据
    async loadMore() {
      const page = this.page + 1;
      const data = await this._fetchList(page);

      this.list.push(...data);
      // 判断是否已达最后一页
      if (data.length < this.pageSize) {
        // 如果没有新数据，不用强制更新滚轮，注意下面的 forceUpdate 方法需要包裹在 nextTick 中
        this.$nextTick(() => {
          this.$refs.scroll.forceUpdate();
        });
      } else {
        this.page++;
      }
    },

    // 模拟一个异步获取列表操作
    async _fetchList(page = 1, pageSize = this.pageSize) {
      try {
        await timeout(1000);

        if (page < 3) {
          // 模拟数据返回
          return Array.from(
            { length: pageSize },
            (value, index) => `Page${page} - ${index}`,
          );
        }
        // 模拟已到达最后一页时的数据返回
        return Array.from(
          { length: pageSize / 2 },
          (value, index) => `Last Page - ${index}`,
        );
      } catch (e) {
        return false;
      }
    },
  },
};
</script>

<style lang="stylus">

.scroll-list
  background: white
  text-align: center
  .space-section
    height: 50px
    line-height: 50px
    font-size: 16px
    border: 10px solid #90A4AE
  .nest-title
    color: #1f8ceb
    position: fixed
    width: 100%
    margin: 20px 0
  .nest-scroll-section
    padding-top: 20px
    background: white
    height: 250px
    border: 10px solid #1f8ceb
  .scroll-item
    line-height: 44px
    height: 44px
</style>
